<template>
	<el-dialog v-model="dialogVisible" title="开票详情" width="900px" :close-on-click-modal="false" @closed="closed">
		<el-form :model="form" label-width="120px" v-if="form.id">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="开票编号：">
						<span style="font-weight: bold; color: #409eff;">{{form.invoic_no}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="会员ID：">
						<span>{{form.member_id}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="开票金额：">
						<span style="color: #f56c6c; font-weight: bold; font-size: 18px;">{{form.amount}}元</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="状态：">
						<el-tag :type="getStatusType(form.status)" size="large">
							{{form.status_type_text}}
						</el-tag>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="发票类型：">
						<span>{{form.invoice_type_text}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="范围类型：">
						<span>{{form.range_type_text}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="来源：">
						<span>{{form.source}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="操作员ID：">
						<span>{{form.operator_id || '-'}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-divider content-position="left">发票抬头信息</el-divider>
			
			<el-form-item label="抬头全称：">
				<span style="font-weight: bold;">{{form.name}}</span>
			</el-form-item>
			
			<el-form-item label="身份证号：" v-if="form.idnumber">
				<span>{{form.idnumber}}</span>
			</el-form-item>
			
			<el-form-item label="地址：" v-if="form.address">
				<span>{{form.address}}</span>
			</el-form-item>
			
			<el-form-item label="邮箱：" v-if="form.email">
				<span>{{form.email}}</span>
			</el-form-item>
			
			<el-form-item label="发票链接：" v-if="form.url">
				<a :href="form.url" target="_blank" style="color: #409eff; text-decoration: underline;">{{form.url}}</a>
			</el-form-item>
			
			<el-divider content-position="left">关联订单信息</el-divider>
			
			<el-form-item label="关联订单：" v-if="form.memberOrder && form.memberOrder.length > 0">
				<el-table :data="form.memberOrder" border style="width: 100%;">
					<el-table-column prop="id" label="订单ID" width="80"></el-table-column>
					<el-table-column prop="ordernum" label="订单号" width="200"></el-table-column>
					<el-table-column prop="code" label="快递公司" width="100"></el-table-column>
					<el-table-column prop="invoic_no" label="开票编号" width="180"></el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="关联订单：" v-else>
				<span style="color: #999;">暂无关联订单</span>
			</el-form-item>
			
			<el-divider content-position="left">时间信息</el-divider>
			
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="创建时间：">
						<span>{{form.create_time}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="更新时间：">
						<span>{{form.update_time}}</span>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closed">关闭</el-button>
				<el-button v-if="form.status == 1" type="primary" @click="goToAudit">开票审核</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		name: 'invoiceDetail',
		data() {
			return {
				dialogVisible: false,
				form: {}
			}
		},
		methods: {
			open() {
				this.dialogVisible = true
				return this
			},
			setData(row) {
				this.form = JSON.parse(JSON.stringify(row))
			},
			closed() {
				this.dialogVisible = false
				this.$emit('closed')
			},
			getStatusType(status) {
				const statusMap = {
					1: 'warning',  // 等待开票
					2: 'success',  // 已开票
					3: 'danger'    // 驳回
				}
				return statusMap[status] || 'info'
			},
			goToAudit() {
				// 关闭详情弹窗
				this.closed()
				// 触发审核事件
				this.$emit('audit', this.form)
			}
		}
	}
</script>

<style scoped>
	.el-form-item {
		margin-bottom: 15px;
	}
	
	.el-divider {
		margin: 20px 0;
	}
	
	.el-table {
		margin-top: 10px;
	}
</style>

